<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
    <meta name="msapplication-tap-highlight" content="no" />

    <link rel="stylesheet" href="/Public/libs/uploadImages/style.css?v=2">
    <link rel="stylesheet" href="/Public/libs/layer/need/layer.css">

    <title>精彩瞬间</title>

</head>

<body>
    <!--加载资源-->
    <div class="lazy_tip" id="lazy_tip">
        <span>99%</span>
        <br> 载入中......</div>
    <div class="lazy_cover"></div>
    <div class="resource_lazy hide"></div>
    <div class="pic_edit">
        <h2 style="color:#4eaf7a;">双指旋转和双指缩放</h2>
        <div id="clipArea"></div>

        <button id="upload2" style="position:relative;">
            选择图片
            <input type="file" id="file" style="position:absolute;top:0px;left:0px;width:100%;height:100%;opacity:0;">
        </button>

        <button id="clipBtn">确认裁切</button>


        <div id="plan" style="display:none">比例剪切后尺寸
            <canvas id="myCanvas"></canvas>
            <button class="submit-btn">确认上传</button>
            <h2 onClick="Close();" style="cursor:pointer; display:inline-block">关闭</h2>
        </div>
    </div>
    <img src="" fileName="" id="hit" style="display:none;z-index: 9">

    <div id="cover"></div>
    <script src="/Public/libs/uploadImages/jquery-2.1.0.min.js"></script>
    <script src="/Public/libs/uploadImages/sonic.js"></script>
    <script src="/Public/libs/uploadImages/comm.js"></script>
    <script src="/Public/libs/uploadImages/hammer.js"></script>
    <script src="/Public/libs/uploadImages/iscroll-zoom.js"></script>
    <script src="/Public/libs/uploadImages/jquery.photoClip.js?v=1"></script>
    <script src="/Public/libs/layer/layer.js"></script>
    <script src="/Public/libs/store.legacy.min.js"></script>
    <script src="/Public/libs/vconsole.min.js"></script>
    <script>
        $(function () {
            // var vConsole = new VConsole();

            // store.set('cj__openid','666');
            if (!store.get('cj__openid')) {
                layer.closeAll();

                layer.open({
                    content: '未签到',
                    btn: '请签到',
                    shadeClose: false,
                    yes: function () {
                        window.location.replace(
                            '/index.php');

                    }
                })
                return false;
            }


            var hammer = '';
            var currentIndex = 0;
            var body_width = $('body').width();
            var body_height = $('body').height();

            $("#clipArea").photoClip({
                width: 320,
                height: 200,
                file: "#file",
                view: "#hit",
                ok: "#clipBtn",
                loadStart: function () {
                    //console.log("照片读取中");
                    $('.lazy_tip br').text('读取中');
                    $('.lazy_cover,.lazy_tip').show();
                },
                loadComplete: function () {
                    //console.log("照片读取完成");
                    $('.lazy_cover,.lazy_tip').hide();
                },
                clipFinish: function (dataURL) {
                    $('#hit').attr('src', dataURL);
                    saveImageInfo();
                }
            });

            var dataBaseUrl = null;
            //图片上传
            function saveImageInfo() {
                $('.lazy_tip br').text('转化中');
                $('.lazy_cover,.lazy_tip').show();

                var filename = $('#hit').attr('fileName');
                var img_data = $('#hit').attr('src');
                if (img_data == "") {
                    alert('null');
                }
                //alert(filename+'|'+img_data);
                render(img_data);

                dataBaseUrl = img_data;

                // $.post("/index.php/Upload/upload", {
                //     base64: img_data,
                //     openid: store.get('cj__openid')
                // }, function (data) {
                //     if (data['return_code'] == 1) {
                //         $('.lazy_cover,.lazy_tip').hide();
                //     } else {
                //         alert(data['return_msg']);
                //     }
                // });
            }

            // 提交base图片
            $('.submit-btn').on('touch click', function () {

                if (dataBaseUrl) {
                    $('.lazy_tip br').text('上传中...');
                    $('.lazy_cover,.lazy_tip').show();

                    $.post("/index.php/Upload/upload", {
                        base64: dataBaseUrl,
                        openid: store.get('cj__openid')
                    }, function (data) {
                        if (data['return_code'] == 1) {
                            $('.lazy_cover,.lazy_tip').hide();

                            layer.open({
                                content: data['return_msg'],
                                skin: 'msg',
                                time: 3 //3秒后自动关闭
                            });

                            dataBaseUrl = null;
                            setTimeout(function () {
                                $('.photo-clip-rotateLayer').html('');
                                $('#file').val('');
                                Close();
                            }, 300)
                            window.isImgLoaded = false;

                        } else {
                            $('.lazy_cover,.lazy_tip').hide();
                            layer.open({
                                content: data['return_msg'],
                                skin: 'msg',
                                time: 3 //3秒后自动关闭
                            });
                        }
                    });

                } else {

                    layer.open({
                        content: '没有选择文件哦...',
                        skin: 'msg',
                        time: 3 //3秒后自动关闭
                    });

                }
            });

            /*获取文件拓展名*/
            function getFileExt(str) {
                var d = /\.[^\.]+$/.exec(str);
                return d;
            }

            //图片上传结束
            // $(function () {
            //     $('#upload2').on('touchstart', function () {
            //         //图片上传按钮
            //         $('#file').click();
            //     });
            // })

            // 渲染 Image 缩放尺寸  
            function render(src) {
                var MAX_HEIGHT = 256; //Image 缩放尺寸 
                // 创建一个 Image 对象  
                var image = new Image();

                // 绑定 load 事件处理器，加载完成后执行  
                image.onload = function () {
                    // 获取 canvas DOM 对象  
                    var canvas = document.getElementById("myCanvas");
                    // 如果高度超标  
                    if (image.height > MAX_HEIGHT) {
                        // 宽度等比例缩放 *=  
                        image.width *= MAX_HEIGHT / image.height;
                        image.height = MAX_HEIGHT;
                    }
                    // 获取 canvas的 2d 环境对象,  
                    // 可以理解Context是管理员，canvas是房子  
                    var ctx = canvas.getContext("2d");
                    // canvas清屏  
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                    canvas.width = image.width; // 重置canvas宽高  
                    canvas.height = image.height;
                    // 将图像绘制到canvas上  
                    ctx.drawImage(image, 0, 0, image.width, image.height);
                    // !!! 注意，image 没有加入到 dom之中  

                    var dataurl = canvas.toDataURL("image/jpeg");
                    var imagedata = encodeURIComponent(dataurl);
                    $('#plan').attr('data-src', dataurl);
                    $('#plan').show();
                };
                // 设置src属性，浏览器会自动加载。  
                // 记住必须先绑定render()事件，才能设置src属性，否则会出同步问题。  
                image.src = src;
            };
        })

        function Close() {
            $('#plan').hide();
        }
    </script>

</body>

</html>